<template>
  <div class="flex-col-center hanzi-box">
    <div :class="['flex-row-center',computedActiveHan]">
<!--      拼音-->
      <div v-for="(item,index) in computedPinyinList" :key="index" :class="['pinyin-item']">{{item}}</div>
    </div>
<!--    汉字-->
    <div :class="[computedActiveHan]">{{hanZi.value}}</div>
  </div>
</template>

<script setup lang="ts">

import {computed, defineProps} from "vue";
import {RecordItem, RecordStatus} from "@/ts/record";
import {getPinyinList} from "@/utils/PinyinUtil";

let props=defineProps<{
    hanZi:RecordItem
  }>()


  let computedPinyinList=computed(()=>{
    return getPinyinList(props.hanZi.value)
  })

  let computedActiveHan=computed(()=>{
    switch (props.hanZi.status){
      case RecordStatus.VOID:return 'void-status';
      case RecordStatus.SUCCESS:return 'success-status';
      case RecordStatus.ERROR:return 'error-status';
    }
    return 'void-status'
  })

</script>

<style scoped lang="less">
  .hanzi-box{
    //border: 2px solid  var(--theme-color);
    border-radius: 0.2em;
    width: fit-content;
    padding: 0.2em;
    //box-shadow: 0 2px 12px 0 rgba(0,0,0,0.2);
    .pinyin-item{
      margin: 0 3px;
      border-bottom: 3px solid transparent;
    }
    .active-han{
      color: var(--theme-color);
    }
    .in-active-han{
      color:black;
    }
    .active-pinyin{
      //color: var(--theme-color);
      color: var(--theme-color);
      border-bottom: 3px solid var(--theme-color);

    }
    .in-active-pinyin{
      color: grey;
      background-color: transparent;
    }

  }

</style>